<!--
 * @Descripttion: 进货单详情查看
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:21:40
 -->
<template>
  <div class="bill_container">
    <affix>
      <div class="clearfix paddingLR20">
        <div class="oper-button btn-group fl">
          <el-button type="default" @click="btnPrint">打印</el-button>
        </div>
        <div class="oper-button btn-group fr">
          <el-button type="primary" @click="btnStock">入库</el-button>
          <el-button type="default" @click="btnJump2List">历史单据</el-button>
        </div>
      </div>
    </affix>
    <el-main>
      <el-card shadow="never">
        <div slot="header" class="header clearfix">
          <div class="clearfix index_container form font12 paddingT20">
            <div class="fr">
              <span>关联编号 : <el-link type="primary" class="font12" @click="btnBillNoLink">{{ dataObj.billNo }}</el-link></span>
            </div>
          </div>
          <div class="index_container title">
            <h1> {{ title }} </h1>
          </div>
        </div>
        <div class="clearfix font12 paddingB10">
          <div class="fl">
            <el-radio-group v-model="dataObj.changeType">
              <el-radio :label="1">全部商品</el-radio>
              <el-radio :label="2">未入库商品</el-radio>
              <el-radio :label="3">已入库商品</el-radio>
            </el-radio-group>
          </div>
          <div class="fr">
            <span>经手人 : {{ dataObj.handUserName }}</span>
            <span class="margin-l10">业务日期 : {{ dataObj.businessTime }}</span>
          </div>
        </div>
        <ShowGoodsList ref="GoodsSelect" :columns="columnsData" />
        <div class="bottom">
          <table class="table" border="1" cellspacing="0" cellpadding="0">
            <tr>
              <td colspan="2" style="padding:1;" @mouseenter="onTdMouseEnter" @mouseleave="onTdMouseLeave">
                <table class="wfull" border="0" cellspacing="0" cellpadding="0">
                  <tr class="lastrow">
                    <td width="100">
                      备 注:
                    </td>
                    <td class="lastCol">
                      {{ dataObj.remarks }}
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { amount } from '@/libs/tools.js'
import { columnsTrans } from './mixins'
import Affix from '@/components/Affix'
import { ShowGoodsList } from '@/views/bill/common'
import { getWaiteBillDetail, getWaiteGoodsByBillId, getHasInGoodsByBillId } from '@/api/bill/bill-stock-in.js'

export default {
  name: 'PurchaseDetail',
  components: { Affix, ShowGoodsList },
  filters: {
    goodAmount: function(row) {
      return amount(row.price).multiply(row.num).format()
    }
  },
  mixins: [columnsTrans, oftenuse],
  props: {
    billId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dataObj: { changeType: 1 }
    }
  },
  computed: {
    'title': function() {
      const billCat = this.dataObj.billCat
      const map = {
        'purchase': '进货'
      }
      const billName = map[billCat] || ''
      return `${billName}入库单`
    }
  },
  watch: {
    'dataObj.changeType': {
      handler(val) {
        const billId = this.billId
        this.getListData(billId, val)
      },
      immediate: true
    }
  },
  mounted() {
    this.goodsSelectComp = this.$refs.GoodsSelect
  },
  created() {
  },
  methods: {
    btnPrint() {

    },
    btnStock() {
      this.$router.push({
        name: 'StockinAdd',
        query: { billId: this.billId }
      })
    },
    btnBillNoLink() {
      const routeName = {
        'purchase': 'PurchaseDetail'
      }
      const { billCat, id } = this.dataObj
      const params = { billId: id }
      this.$router.push({
        name: routeName[billCat],
        query: params
      })
    },
    btnJump2List() {
      this.$router.push({
        name: 'PurchaseOrderList'
      })
    },
    getListData(billId, changeType) {
      const methodsMap = {
        1: getWaiteBillDetail,
        2: getWaiteGoodsByBillId,
        3: getHasInGoodsByBillId
      }
      const method = methodsMap[changeType]
      method(billId).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          if (changeType === 1) {
            const { bill, billDetailList } = data
            const changeTypeObj = { changeType: this.dataObj.changeType }
            this.dataObj = Object.assign(bill, changeTypeObj)
            this.$refs.GoodsSelect.setTableData(billDetailList)
            return
          }
          this.$refs.GoodsSelect.setTableData(data)
        }
      })
    },
    // on
    onTdMouseEnter(e) {
      const target = e.target
      target.className = 'bg-gay'
    },
    onTdMouseLeave(e) {
      const target = e.target
      target.className = ''
    }
  }
}
</script>
